<!--
*- coding = utf-8 -*-
#@Time : 2023-04-09 23:09
#@Author : CSDN 沉默小管
#@File : index.vue
#@web  : golangblog.blog.csdn.net
#@Software: WebStorm
-->
<template>
    <div class="image-error">
        <el-image
                :lazy="props.lazy"
                :src="props.picUrl"
                class="image"
                :style="props.imgStyle!=''?props.imgStyle:'cursor:pointer;height: 50px;width: auto;'"
                :initial-index="initIndex"
                :zoom-rate="1"
                v-bind="attrs"
                fit="contain"
                :preview-src-list="handleShowImage()"
                :hide-on-click-modal="true"
                :preview-teleported="true"
        >
          <template #error>
            <div class="image-slot">
              <el-icon  style="width:50px;height:50px"><Picture /></el-icon>
            </div>
          </template>
        </el-image>
    </div>
</template>

<script setup lang="ts">
    import { Picture } from '@element-plus/icons-vue'
    import {isArray} from "@/utils/lodash"
    import {ref, useAttrs} from "vue";
    interface propsInterface{
        isShowImg?:boolean//是否展示图片
        picUrl:string
        imgStyle?:string
        lazy?:boolean
    }

    let props = withDefaults(defineProps<propsInterface>(),{
        picUrl:"",
        imgStyle:"",
        lazy:true,
        isShowImg:true,
    })
    const attrs = useAttrs();
    let initIndex = ref<number>(0)
    let srcList = ref<string[]>([])

    const handleShowImage = ()=>{
      if(!props.isShowImg)return;
      if(isArray(props.picUrl)){
        srcList.value = props.picUrl
      }else{
        srcList.value = [props.picUrl]
      }
      return srcList.value
    }
</script>

<style scoped lang="less">
.image-error{
  :deep(.el-image__wrapper){
    position: relative;
    width:100px;
  }
}
.image-error .el-image {
  padding: 0 5px;
  max-width: 300px;
  max-height: 200px;
  width: 100%;
  height: 200px;
}

.image-error .image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}
.image-error .image-slot .el-icon {
  font-size: 30px;
}
</style>